<template>
  <div
    class="course-book"
    v-loading="loading"
    element-loading-text="拼命加载中"
  >
    <div style="height: 40px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>考研书籍</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :inline="true" :model="formData" :rules="rules" ref="formData">
      <el-form-item label="课程图书名称" prop="bookName">
        <el-input
          v-model="formData.bookName"
          placeholder="请填写课程图书名称"
          autocomplete="off"
          :clearable="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="课程类型" prop="categoryId">
        <el-select
          v-model="formData.categoryId"
          placeholder="课程类型"
          autocomplete="off"
          :clearable="true"
          :popper-append-to-body="false"
          style="width: 150px"
        >
          <el-option
            v-for="item in courseCategoryArray"
            :key="item.id"
            :label="item.courseCategoryName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="info" @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
    <div v-if="tableData.length > 0">
      <CommonItem :dataList="tableData"></CommonItem>
    </div>
    <div v-else>
      <el-empty description="暂无数据"></el-empty>
    </div>
    <!-- 分页 -->
    <el-pagination
      v-show="tableData.length > 0"
      background
      layout="prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      :pager-count="7"
      style="text-align: right; margin-top: 24px"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getCourseBookList } from "@/api/client/courseBook";
import { getCourseCategoryAll } from "@/api/client/courseCategory";
import CommonItem from "@/components/CommonItemView.vue";
export default {
  name: "CourseBookView",
  data() {
    return {
      formData: {
        bookName: "",
        categoryId: "",
      },
      rules: {
        bookName: [
          { validator: this.customValidator, message: "请填写课程名称" },
        ],
        categoryId: [
          { validator: this.customValidator, message: "请选择课程类型" },
        ],
      },
      courseCategoryArray: [],
      page: 1,
      pageSize: 18,
      total: 0,
      currentPage: 1,
      tableData: [],
      loading: false,
    };
  },
  components: {
    CommonItem,
  },
  created() {
    this.getCourseCategoryAll();
    this.getDataList();
  },
  methods: {
    // 自定义校验规则
    customValidator(rule, value, callback) {
      const { bookName, categoryId } = this.formData;
      if (!bookName && !categoryId) {
        callback(new Error("请填写信息"));
      } else {
        callback();
      }
    },
    // 获取所有课程分类
    async getCourseCategoryAll() {
      const res = await getCourseCategoryAll();
      this.courseCategoryArray = res.data;
    },
    // 查询
    query() {
      this.$refs.formData.validate(async (v) => {
        if (v) {
          this.page = 1;
          await this.getDataList();
        }
      });
    },
    // 清空
    async clear() {
      this.$refs.formData.resetFields();
      await this.getDataList();
    },
    // 查询课程视频集合
    async getDataList() {
      try {
        this.loading = true;
        const res = await getCourseBookList({
          ...this.formData,
          page: this.page,
          pageSize: this.pageSize,
        });
        this.tableData = res.data.records;
        this.total = res.data.total;
      } catch {
        this.$message.error("获取数据失败！");
      } finally {
        this.loading = false;
      }
    },
    // 分页查询
    handleCurrentChange(page) {
      this.page = page;
      this.currentPage = page;
      this.getDataList();
    },
  },
};
</script>

<style lang="less" scoped>
.course-book {
  width: 100%;
  height: 100%;
  padding: 10px 60px;
}
// 解决下拉框显示不完整问题
/deep/.el-select-dropdown__wrap.el-scrollbar__wrap {
  margin-bottom: 0 !important;
}
</style>